<template>
        <div class="s-input">
            <input type="text" placeholder="请输入关键字" v-model="text">
            <span @click="search()"><img src="../../../static/images/magnifier.png" alt=""></span>
        </div>
</template>
<script>
export default {
    data(){
        return{
            text:'',
        }
    },
    methods:{
        search(){
            var data={
                text:this.text,
            }
            this.$emit('SearchData',data);
        }
    }
}
</script>
<style lang="less" scoped>
    .s-input{
        height: 100%;
        width: 100%;
        border-radius: 100px;
        overflow: hidden;
        border:2px solid rgba(153,153,153,1);
        position: relative;
        display: inline-block;
        input{
            height: 100%;
            line-height: 100%;
            border: none;
            width: 100%;
            text-indent: 1em;
            font-size:18px;
            background: none;
        }
        &>span{
            height: 28px;
            position: absolute;
            top: 24%;
            right: 15px;
            &:hover{
                cursor: pointer;
            }
            img{
                height: 100%;
            }
        }
    }
</style>
